﻿<Grid x:Class="TouchControls.MasterDetailListView.MasterDetailList"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
             xmlns:ee="http://schemas.microsoft.com/expression/2010/effects"
      xmlns:TouchControls="clr-namespace:TouchControls" mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid.Resources>        
        <Style x:Key="ListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
            <Setter Property="Padding" Value="3"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Margin" Value="2"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="14.667"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Grid Background="{TemplateBinding Background}" Width="100" Height="80">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.2"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FillColor"/>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="FillColor">
                                                <EasingColorKeyFrame KeyTime="0" Value="#FF89C807"/>
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="FillColor">
                                                <EasingColorKeyFrame KeyTime="0" Value="#FFABFF00"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentPresenter"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.3"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FillColor2"/>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FocusVisualElement">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedUnfocused"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="FocusVisualElement" d:IsOptimized="True"/>
                                            <DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FocusVisualElement" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="LayoutStates">
                                    <VisualState x:Name="AfterLoaded"/>
                                    <VisualState x:Name="BeforeLoaded"/>
                                    <VisualState x:Name="BeforeUnloaded"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ValidationStates">
                                    <VisualState x:Name="Valid"/>
                                    <VisualState x:Name="InvalidFocused"/>
                                    <VisualState x:Name="InvalidUnfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle x:Name="FillColor" IsHitTestVisible="False" RadiusY="1" RadiusX="1">
                                <Rectangle.Fill>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="Black" Offset="0"/>
                                        <GradientStop Color="#FF393938" Offset="0.885"/>
                                        <GradientStop Color="#FF3D3D3D" Offset="1"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0">
                                <Rectangle.Fill>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="Black" Offset="0"/>
                                        <GradientStop Color="#FFE7E707" Offset="1"/>
                                        <GradientStop Color="#FFA7A706" Offset="0.833"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Rectangle x:Name="FillColor2" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Opacity="0">
                                <Rectangle.Fill>
                                    <RadialGradientBrush Center="0.486,1.003" GradientOrigin="0.486,1.003" RadiusX="0.62" RadiusY="0.567">
                                        <GradientStop Color="#FFD3FFA1" Offset="0"/>
                                        <GradientStop Offset="1" Color="#00829F46"/>
                                    </RadialGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            <Path x:Name="Lightshade" Data="M0.33266705,79.500015 L0.16666667,0.16699474 L99.499672,0.16699474 z" Fill="#FFD0CECE" Margin="0.334,0.334,0.333,0.333" Stretch="Fill" UseLayoutRounding="False" Opacity="0.11"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <ItemsPanelTemplate x:Key="ItemsPanelTemplate">
            <WrapPanel Width="340" Height="290"/>
        </ItemsPanelTemplate>
        <DataTemplate x:Key="ItemTemplate">
            <StackPanel>
                <TextBlock Text="{Binding Name}" HorizontalAlignment="Center"/>
                <TextBlock Text="{Binding Designation}" FontSize="10" HorizontalAlignment="Center"/>
            </StackPanel>
        </DataTemplate>


        <Style x:Key="ReturnButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Path Data="M9.4375,0 C9.4375,8.9406967E-08 9.4726563,1.5732423 9.5166016,3.5397949 L9.518611,3.6296887 L20.241436,3.6250005 C25.070377,3.6250005 28.985004,8.1021528 28.985004,13.625 C28.985004,19.147848 25.070377,23.625 20.241436,23.625 C15.821316,23.632332 11.401192,23.639664 6.9810696,23.646996 C6.9810696,23.646996 6.9785881,20.676502 6.9785881,20.676502 L16.744015,20.624998 C21.572952,20.624998 25.487579,17.490992 25.487579,13.624998 C25.487579,9.7590046 21.572952,6.6249981 16.744015,6.6249981 L9.5855446,6.6249981 L9.5858154,6.6371155 C9.6396484,9.0461426 9.6875,11.1875 9.6875,11.1875 L0,5.5 z" Fill="White" RenderTransformOrigin="0.5,0.5" Stretch="Fill" UseLayoutRounding="False">
                                <Path.RenderTransform>
                                    <ScaleTransform ScaleX="-1"/>
                                </Path.RenderTransform>
                            </Path>
                            <Rectangle Fill="#00F4F4F5"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>
    <VisualStateManager.CustomVisualStateManager>
        <ei:ExtendedVisualStateManager/>
    </VisualStateManager.CustomVisualStateManager>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:0.7">
                    <ei:ExtendedVisualStateManager.TransitionEffect>
                        <ee:RadialBlurTransitionEffect />
                    </ei:ExtendedVisualStateManager.TransitionEffect>
                </VisualTransition>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="ViewDetails">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="FrontSide">
                        <DiscreteObjectKeyFrame KeyTime="0:0:0.001" Value="{x:Static Visibility.Visible}"/>
                        <DiscreteObjectKeyFrame KeyTime="0:0:0.002" Value="{x:Static Visibility.Collapsed}"/>
                    </ObjectAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BackSide">
                        <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FrontSide">
                        <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="HideDetails"  >
                <Storyboard/>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>    
    <Grid DataContext="{Binding SelectedItem, ElementName=MasterListBox}" x:Name="BackSide" Opacity="0">
        <TextBlock Text="Youpi" />
        <Button x:Name="ReturnButton" Content="Button" Height="15.041" Canvas.Left="13.277"/>
    </Grid>
    <Grid x:Name="FrontSide">
        <Rectangle x:Name="BlackBg" Width="318" Height="257" RadiusX="5" RadiusY="5" Fill="#FF1D1D1D" Stroke="#FF5E5E5E"/>
        <TouchControls:TouchListBox x:Name="MasterListBox" Height="260" Width="320" ItemTemplate="{StaticResource ItemTemplate}" ItemsPanel="{StaticResource ItemsPanelTemplate}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0" ItemContainerStyle="{StaticResource ListBoxItemStyle}"/>
    </Grid>
</Grid>
